
<style>
  /* 改变盒模型 */
  * {
    box-sizing: border-box;
  }
  /* 宽度: 720 + 240 + 20 */
  body {
    /* 固定 */
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
  }
  .wrapper {
    /* 固定 */
    padding-right: 2.08333333%;
  }
  /* 清除网格中每行的浮动 */
  .row {
    clear: both;
  }
  /* 列与列之间保持 20 像素的间隔 */
  .col {
    float: left;
    margin-left: 2.08333333%;
    width: 6.25%;  /* 2.08333333 * 3 ~ 6.25 */
    background: rgb(255, 150, 150);
  }
  /* Two column widths (12.5%) plus one gutter width (2.08333333%) */
  .col.span1 {
    width: 14.58333333%;
  }
  .col.span2 {
    width: 22.91666666%;
  }
  .col.span3 {
    width: 31.24999999%;
  }
  </style>
  <div class="wrapper">
    <div class="row">
      <div class="col">1</div>
      <div class="col">2</div>
      <div class="col">3</div>
      <div class="col">4</div>
      <div class="col">5</div>
      <div class="col">6</div>
      <div class="col">7</div>
      <div class="col">8</div>
      <div class="col">9</div>
      <div class="col">10</div>
      <div class="col">11</div>
      <div class="col">12</div>
    </div>
    <div class="row">
      <div class="col span1">13</div>
      <div class="col span2">14</div>
      <div class="col span3">15</div>
      <div class="col span2">16</div>
    </div>
  </div>